<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head>
        <meta charset="utf-8">
        <title>航行记录</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" th:href="@{/static/plugin/layui/css/layui.css}" media="all">
        <style type="text/css">
            /*table高度自适应*/
            .layui-table-cell {
                height: auto ;
                white-space: normal;
                word-wrap:break-word;
            }
        </style>
    </head>
    <body>
        <script type="text/html" id="tbBar">
            <!--查看航行记录-->
            <i style="font-size: 24px; color: #1e9eff;cursor: pointer;" onmouseover="show_tips(this, '查看航行记录', '#1e9eff')"
               class="layui-icon layui-icon-form" lay-event="showRecord"></i>
            <!--查看航行地图-->
            <i style="font-size: 24px; color: #ff1217;cursor: pointer;" onmouseover="show_tips(this, '查看航行地图', '#ff1217')"
               class="layui-icon layui-icon-location" lay-event="showMap"></i>
        </script>

        <div style="padding: 8px;">
            <!-- 卡片风格 -->
            <div class="layui-tab layui-tab-brief layui-tab-card" lay-filter="tab-all">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="navigationTab">航程记录</li>
                    <li lay-id="naviagtionRecordTab">航行记录</li>
                </ul>
                <div class="layui-tab-content">
                    <!--------------------------------------------------航程记录---------------------------------------------------------->
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form layui-from-pane" action="">
                            <!--航程表查询条件-->
                            <div>
                                <div class="layui-inline">
                                    <input class="layui-input" id="s_navigationName" autocomplete="off" placeholder="航程名称">
                                </div>
                                <div class="layui-inline">
                                    <input type="text" class="layui-input" id="s_startTime" placeholder="开始时间" autocomplete="off">
                                </div>
                                <div class="layui-inline">
                                    <input type="text" class="layui-input" id="s_endTime" placeholder="结束时间" autocomplete="off">
                                </div>
                                <button type="button" id="searchNavigationBtn" class="layui-btn" data-type="reload">搜索</button>
                                <button type="button" id="deleteNavigationBtn" class="layui-btn layui-btn-danger" style="float: right;right: 20px;">删除</button>
                            </div>
                            <table class="layui-hide" id="navigation" lay-filter="navigation"></table>
                        </form>
                    </div>

                    <!--------------------------------------------------航行记录--------------------------------------------------->
                    <div class="layui-tab-item">
                        <form class="layui-form layui-from-pane" action="">
                            <!--航行记录表查询条件-->
                            <div class="layui-inline">
                                <input class="layui-input" id="sr_navigationName" autocomplete="off" placeholder="航程名称">
                            </div>
                            <!--发送结果-->
                            &nbsp;发送结果：
                            <div class="layui-inline" style="width: 120px;">
                                <select id="sr_sendStatus" class="layui-select"></select>
                                <div class="layui-unselect layui-form-select">
                                    <div class="layui-select-title">
                                        <input type="text" placeholder="发送结果" autocomplete="off"
                                               class="layui-input layui-unselect">
                                        <i class="layui-edge"></i>
                                    </div>
                                </div>
                            </div>
                            <!--模式-->
                            &nbsp;模式：
                            <div class="layui-inline" style="width: 120px;">
                                <select id="sr_mode" class="layui-select"></select>
                                <div class="layui-unselect layui-form-select">
                                    <div class="layui-select-title">
                                        <input type="text" placeholder="模式" autocomplete="off"
                                               class="layui-input layui-unselect">
                                        <i class="layui-edge"></i>
                                    </div>
                                </div>
                            </div>
                            <button type="button" id="searchNavigationRecordBtn" class="layui-btn" data-type="reload">搜索</button>
                            <table class="layui-hide" id="navigationRecord" lay-filter="navigationRecord"></table>
                        </form>
                    </div>

                </div>
            </div>
        </div>


        <input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}">

        <script th:src="@{/static/js/jquery.min.js}" charset="utf-8"></script>
        <script th:src="@{/static/plugin/layui/layui.js}" charset="utf-8"></script>
        <script th:src="@{/static/js/app.js}" charset="utf-8"></script>
        <script src="/static/js/whysu.js" th:src="@{/static/js/whysu.js}"></script>

        <!--序号自增-->
        <script type="text/html" id="xuhao">
            {{d.LAY_TABLE_INDEX+1}}
        </script>

        <script>
            layui.use(['jquery', 'table', 'layer', 'form','laydate', 'element'], function () {
                var table = layui.table;
                var layer = layui.layer;
                var form = layui.form;
                var laydate = layui.laydate;
                var element = layui.element;

                //页面一打开就执行
                layer.ready(function () {
                    //执行一个laydate实例
                    laydate.render({
                        elem: '#s_startTime' //指定元素，input的id
                        //,value:new Date()//初始值为当前日期
                        ,type: 'date'//时间格式 date表示 yyyy-MM-dd
                    });
                    laydate.render({
                        elem: '#s_endTime' //指定元素，input的id
                        //,value:new Date()//初始值为当前日期
                        ,type: 'date'//时间格式 date表示 yyyy-MM-dd
                    });
                });

                element.on('tab(tab-all)', function (data) {
                    if (data.index == 1)  {
                        // 下拉框
                        addOption($('#sr_sendStatus'), DataType.SendStatus, true);
                        addOption($('#sr_mode'), DataType.Mode, true);
                        // 渲染
                        layui.form.render();
                    }
                });

                // 航程记录
                table.render({
                    elem: '#navigation'
                    , url: ctx + '/navigationRecord/getNavigationPage'
                    , method: 'post'
                    , contentType: 'application/json'
                    , defaultToolbar: false //去掉右上角的打印等按钮
                    , title: null
                    , loading: true //显示加载条
                    , cols: [
                        [
                            {type: 'checkbox'},
                            {title: '序号', templet: '#xuhao', align: 'center', width: 60},
                            {field: 'id', title: 'ID', hide: true},
                            {field: 'navigationName', title: '航行名称', align: 'center'},
                            {
                                field: 'startTime', title: '创建时间', align: 'center',
                                templet: function (d) {
                                    if (d.startTime == null) {
                                        return "";
                                    } else {
                                        return layui.util.toDateString(d.startTime, 'yyyy-MM-dd HH:mm:ss');
                                    }
                                }
                            },
                            {
                                field: 'endTime', title: '结束时间', align: 'center',
                                templet: function (d) {
                                    if (d.endTime == null) {
                                        return "";
                                    } else {
                                        return layui.util.toDateString(d.endTime, 'yyyy-MM-dd HH:mm:ss');
                                    }
                                }
                            },
                            {field: 'totalNumber', title: '总数', align: 'center'},
                            {field: 'createBy', title: '创建者', align: 'center'},
                            {field: 'updateBy', title: '结束者', align: 'center'},
                            {fixed: 'right', title: '操作', toolbar: '#tbBar'}
                        ]
                    ]
                    , page: true
                    , request: {
                        pageName: 'pageNum'//页码的参数名称，默认：page
                        , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                    }
                    , parseData: function (res) { //res 即为原始返回的数据
                        return {
                            "code": 0, //解析接口状态
                            "msg": "", //解析提示文本
                            "count": res.body.totalSize, //解析数据长度
                            "data": res.body.list //解析数据列表
                        };
                    }
                });

                // 航行记录
                table.render({
                    elem: '#navigationRecord'
                    , url: ctx + '/navigationRecord/getNavigationRecordPage'
                    , method: 'post'
                    , contentType: 'application/json'
                    , defaultToolbar: false //去掉右上角的打印等按钮
                    , title: null
                    , loading: true //显示加载条
                    , cols: [
                        [
                            {title: '序号', templet: '#xuhao', width: 60},
                            {field: 'id', title: 'ID', hide: true},
                            {field: 'navigationId', title: 'navigationId', hide: true},
                            {field: 'navigationName', title: '航程名称'},
                            {
                                field: 'createTime', title: '发送时间', align: 'center',
                                templet: function (d) {
                                    if (d.createTime == null) {
                                        return "";
                                    } else {
                                        return layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss');
                                    }
                                }
                            },
                            {field: 'latitude', title: '纬度值', hide: true},
                            {field: 'latitudeType', title: '纬度类型', hide: true},
                            {
                                field: 'latitudeDesc', title: '纬度', align: 'center',
                                templet: function (d) {
                                    if (d.latitude == null || d.latitude === '') {
                                        return '';
                                    }
                                    if (d.latitudeType === 'N') {
                                        return d.latitude + '/北纬';
                                    } else if (d.latitudeType === 'S') {
                                        return d.latitude + '/南纬';
                                    } else {
                                        return d.latitude;
                                    }
                                }
                            },
                            {field: 'longitude', title: '经度值', hide: true},
                            {field: 'longitudeType', title: '经度类型', hide: true},
                            {
                                field: 'longitudeDesc', title: '经度', align: 'center',
                                templet: function (d) {
                                    if (d.longitude == null || d.longitude === '') {
                                        return '';
                                    }
                                    if (d.longitudeType === 'E') {
                                        return d.longitude + '/东经';
                                    } else if (d.longitudeType === 'W') {
                                        return d.longitude + '/西经';
                                    } else {
                                        return d.longitude;
                                    }
                                }
                            },
                            {field: 'speed', title: '速度(单位节)', align: 'center'},
                            {field: 'course', title: '航向', align: 'center'},
                            {field: 'sendStatus', title: '发送结果', hide: true},
                            {
                                field: 'sendFailReason', title: '发送结果', align: 'center',
                                templet: function (d) {
                                    var label = getLabel(DataType.SendStatus, d.sendStatus);
                                    if (d.sendStatus === 2) {
                                        // 发送成功
                                        return "<span style='color: green;'>" + label + "</span>"
                                    } else if (d.sendStatus === 3) {
                                        // 发送失败(红色，并带上失败原因)
                                        if (d.sendFailReason != null && d.sendFailReason !== '') {
                                            label = label + "(" + d.sendFailReason + ")";
                                        }
                                        return "<span style='color: red;'>" + label + "</span>"
                                    }
                                    return label;
                                }
                            },
                            {
                                field: 'mode', title: '模式', align: 'center',
                                templet: function (d) {
                                    return getLabel(DataType.Mode, d.mode)
                                }
                            },
                            {field: 'sendContent', title: '发送内容', width: 250}
                        ]
                    ]
                    , page: true
                    , request: {
                        pageName: 'pageNum'//页码的参数名称，默认：page
                        , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                    }
                    , parseData: function (res) { //res 即为原始返回的数据
                        return {
                            "code": 0, //解析接口状态
                            "msg": "", //解析提示文本
                            "count": res.body.totalSize, //解析数据长度
                            "data": res.body.list //解析数据列表
                        };
                    }
                });


                /** 航程表搜索框*/
                var navigationActive = {
                    reload: function () {
                        var queryWhere = {};
                        // 航程名称
                        queryWhere['queryNavigationName'] = $('#s_navigationName').val();
                        // 开始时间
                        queryWhere['queryStartTime'] = $('#s_startTime').val();
                        // 结束时间
                        queryWhere['queryEndTime'] = $('#s_endTime').val();
                        //执行重载
                        table.reload('navigation', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            , where: queryWhere
                            // , done: function (res, curr, count) {
                            //     this.where = {};
                            // }
                        }, 'data');
                    }
                };

                /** 航行记录表搜索框*/
                var navigationRecordActive = {
                    reload: function () {
                        var queryWhere = {};
                        // 航程名称
                        queryWhere['navigationName'] = $('#sr_navigationName').val();
                        // 发送结果
                        queryWhere['sendStatus'] = $('#sr_sendStatus').val();
                        // 模式
                        queryWhere['mode'] = $('#sr_mode').val();
                        //执行重载
                        table.reload('navigationRecord', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            , where: queryWhere
                            // , done: function (res, curr, count) {
                            //     this.where = {};
                            // }
                        }, 'data');
                    }
                };

                /*搜索*/
                $('#searchNavigationBtn').on('click', function () {
                    var type = $(this).data('type');
                    navigationActive[type] ? navigationActive[type].call(this) : '';
                });

                /*搜索*/
                $('#searchNavigationRecordBtn').on('click', function () {
                    var type = $(this).data('type');
                    navigationRecordActive[type] ? navigationRecordActive[type].call(this) : '';
                });


                // 监听【当前航线表】的操作
                table.on('tool(navigation)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'showRecord') {
                        // 切换到“航行记录表”的tab
                        element.tabChange('tab-all', 'naviagtionRecordTab');
                        // 设置查询条件，航行名称
                        $('#sr_navigationName').val(data.navigationName);
                        // 点击搜索按钮，立马查询
                        $('#searchNavigationRecordBtn').click();
                    } else if (obj.event === 'showMap') {
                        layer.open({
                            //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                            type: 2,
                            title: "航行地图",
                            area: ['100%', '100%'],
                            scrollbar: false, // 父页面不滚动
                            content: ctx + '/navigationRecord/showMapFrame?navigationName=' + data.navigationName //跳转页面
                        });
                    }
                });

                // 删除航程
                $('#deleteNavigationBtn').click(function () {
                    // 获取表选中的数据
                    let checkDataList = table.checkStatus('navigation').data;
                    if (checkDataList.length === 0) {
                        layer.msg("请选择要删除的航程", {
                            time: 1000
                        });
                        return;
                    }
                    let idList = [];
                    $.each(checkDataList, function (index,value,array){
                        if (value.is !== '') {
                            idList.push(value.id);
                        }
                    });
                    layer.confirm('确定删除这' + idList.length + '条航程数据吗？', function (index) {
                        // 批量删除
                        $.ajax({
                            url: ctx + '/navigationRecord/batchDeleteNavigationRecord',
                            type: "POST",
                            contentType: "application/json",
                            dataType: "json",
                            data: requestDTO({
                                "navigationIdList": idList
                            }),
                            beforeSend: function () {
                                this.layerLogin = showLoad();
                            },
                            complete: function () {
                                closeLoad(this.layerLogin);
                            },
                            success: function (data) {
                                if (data.result.code == 200) {
                                    // 操作成功
                                    layer.msg("操作成功", {
                                        time: 1000
                                    });
                                    // 延迟关闭
                                    setTimeout(function(){
                                        // 关闭所有弹窗
                                        layer.closeAll();
                                        // 重新加载航线表
                                        layui.table.reload('navigation');
                                    }, 330);
                                } else {
                                    layer.msg(data.result.message);
                                }
                            },
                            error: function (e) {
                                layer.msg("请求异常")
                            }
                        });
                    });
                });

            });
        </script>
    </body>
</html>